<template>
<div class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox">
    <div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
        <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
            <div class="mt-12 flex flex-col items-center">
                <h1 class="text-2xl xl:text-3xl font-extrabold">用户登录</h1>
                <div class="w-full flex-1 mt-8">

                    <div class="my-12 border-b text-center">
                        <div class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2">或请联系管理员开通账号</div>
                    </div>

                    <div class="mx-auto max-w-xs">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" type="text" placeholder="账号" v-model="account">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" type="password" placeholder="密码" v-model="password">
                        <button class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none" @click="submit">
                            <span class="ml-3">登 录</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
            <img src="../assets/dlbox.svg" />
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:'login',
    data(){
        return {
            account:'',
            password:''
        }
    },
    methods:{
        submit(){
            let params = {account:this.account,password:this.password}
            this.$store.dispatch('admin/login',params)
        }
    }
}
</script>

<style scoped>
@import url(../styles/tailwind.min.css);

.bg-indigo-100 {
  background-color: #ebf4ff;
}

.border-gray-200 {
  border-color: #edf2f7;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.bg-indigo-500 {
  background-color: #667eea;
}
</style>